<template>
	<view >
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(item,index) in goodsInfo.pics" :key="item.pics_id">
				<image :src="item.pics_big" mode="" @click="previewImg(index)"></image>
			</swiper-item>
		</swiper>
		<view class="gooods-info-box" v-if="goodsInfo.goods_price">
			<view class="price">￥{{goodsInfo.goods_price}}</view>
			<view class="panel-body">
				<view class="desc">{{goodsInfo.goods_name}}</view>
				<view class="icon-box">
					<uni-icons type="star" size="18"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="yf">快递: 免运费</view>
			<rich-text :nodes="goodsInfo.goods_introduce" />
			<view class="goods_nav">
				<uni-goods-nav :options="options" :buttonGroup="buttonGroup" :fill="true" @click="iconClick"
					@buttonClick="buttonClick" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				goodsInfo: {},
				options: [{
						icon: "shop",
						text: "店铺"
					},
					{
						icon: "cart",
						text: "购物车",
						info: 2
					}
				],
				buttonGroup: [{
						text: "加入购物车",
						backgroundColor: "#f00",
						color: "white"
					},
					{
						text: "立即购买",
						backgroundColor: "#ffa200",
						color: "white"
					}
				]
			}
		},
		computed: {
			...mapState("cartAbout", ["cart"]),
			...mapGetters("cartAbout",["total"])
		},
		watch: {
			total:{
				immediate: true,
				handler(newValue) {
					let findResult=this.options.find(item=> item.text==="购物车");
					findResult.info=newValue;
				}
			}
		},
		methods: {
			...mapMutations("cartAbout",["addToCart"]),
			async getGoodsInfo(goods_id) {
				let {
					data: res
				} = await uni.$http.get("/goods/detail", {
					goods_id
				});
				if (res.meta.status !== 200) return uni.$showMsg();
				// 给图片添加样式display: "block"; 解决图片之间有空白的问题，将图片的格式从webp改为jpg已解决webp在ios系统中支持不好的问题
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,
					"<img style='display: block;' ").replace(/webp/g, "jpg");
				this.goodsInfo = res.message;
			},
			previewImg(index) {
				uni.previewImage({
					// current 查看的图片索引值
					current: index,
					urls: this.goodsInfo.pics.map(item => item.pics_big),
					indicator: "number"
				})
			},
			iconClick(e) {
				if (e.content.text === "购物车") {
					uni.switchTab({
						url: "/pages/cart/cart"
					})
				}
			},
			buttonClick(e) {
				if (e.content.text === "加入购物车") {
					const goods = {
						"goods_id": this.goodsInfo.goods_id, 
						"goods_name": this.goodsInfo.goods_name, 
						"goods_price": this.goodsInfo.goods_price, 
						"goods_count": 1, 
						"goods_small_logo": this.goodsInfo.goods_small_logo, 
						"goods_state": true
					}
					this.addToCart(goods);
				}
			}
		},
		onLoad(options) {
			// 该字段用来提供请求所必须的参数
			const goodsId = options.goods_id;
			this.getGoodsInfo(goodsId);
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.gooods-info-box {
		padding: 10px;
		padding-right: 0;

		.price {
			color: #C00000;
			font-size: 18px;
			margin: 10px 0;
		}

		// panel-body流式布局，他的子元素icon-box也采取流式布局(column)
		.panel-body {
			display: flex;
			justify-content: space-between;

			.desc {
				fong-size: 13px;
				padding-right: 10px;
			}

			.icon-box {
				width: 120px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #ccc;

				text {
					font-size: 12px;
					color: gray;
				}
			}
		}

		.yf {
			margin: 10px 0;
			font-size: 12px;
			color: gray;
		}

		.goods_nav {
			position: sticky;
			bottom: 0;
			left: 0;
		}
	}
</style>